<template>
	<view class="pat-wrapper">
		<view class="pt-grid">
			<view class="pt-card flex">
				<view class="bed-cc">
					<view class="txt">+3床</view>
					<text class="iconfont icon-bingchuang"></text>
				</view>
				<view class="flex_bd">
					<view class="pt-head">
						<text class="z-id">张麻子</text>
						<text class="z-num">住院号：007</text>
					</view>
					<view class="pt-meta flex-center justify-zBetween">
						<view class="item">性别：保密</view>
						<view class="item">日期：2021-05-31 09:22:06</view>
					</view>
					<view class="pt-btns flex-center ">
						<button class="btn btn-gout" type="default">出院</button>
						<button class="btn btn-ac" type="default">转科</button>
						<button class="btn btn-ac" type="default" @click="openUrl('/pages/index/patientInfo')">编辑</button>
					</view>
				</view>
				<view class="iconfont icon-erweima"></view>
			</view>
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#00a9e8" bar-width="100"  ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
		</view>
		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="page-box">
						<view class="cath-list-cell" v-for="(item, index) in  orderList[0]" :key="index">
							<view class="cath-list-grid">
								<view class="cath-list-body">
									<view class="cath-head flex-center">
										<text class="title">气切导管</text><text @click="xshow = true" class="iconfont icon-edit"></text>
										<view class="ct-btns flex-center ">
											<button class="btn btn-blue-solid" @click="dshow = true" type="default">打印</button>
											<button class="btn btn-red-solid" type="default">删除</button>
										</view>
									</view>
									<view class="cath-items">
										<u-row gutter="16">
											<u-col span="4">
												<view class="cath-item">内置  10mm</view>
											</u-col>
											<u-col span="4">
												<view class="cath-item">外露  10mm</view>
											</u-col>
											<u-col span="4">
												<view class="cath-item">深度  10mm</view>
											</u-col>
											<u-col span="12">
												<view class="cath-item">到期  2021-05-31 09:22:06</view>
											</u-col>
										</u-row>
									</view>
								</view>
								<view class="cath-foot flex-center justify-zBetween">
									<button class="btn " type="default" :class="item.isSubShow?'btn-gray-solid':'btn-blue-solid'" @click="Toggle(item,index)">
										<text v-if="!item.isSubShow">展开</text><text v-else>收起</text>
									</button>
									<button class="btn btn-gray-solid" type="default" @click="fshow = true">添加附属物</button>
								</view>
							</view>
							<view class="cath-toggle-body" v-show="item.isSubShow">
								<view class="fs-heading"><text>附属物信息</text></view>
								<view class="fs-cell flex" v-for="item in 2">
									<view class="flex_bd">
										<view class="cath-head flex-center">
											<text class="title">辅料贴</text><text  class="iconfont icon-edit"></text>
										</view>
										<view class="cath-time">到期：2021-05-31 09:22:06</view>
									</view>
									<view class="ct-btns flex-center ">
										<button class="btn btn-blue-solid" type="default">打印</button>
										<button class="btn btn-red-solid" type="default">删除</button>
									</view>
								</view>
							</view>
						</view>
						<u-loadmore :status="loadStatus[0]" bgColor="#f9f9f9"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="page-box">
						<view class="cah-record-list" v-for="(item, index) in  orderList[1]" :key="index">
							<view class="flex_bd">
								<view class="cath-head flex-center">
									<text class="title">气切导管</text><text class="iconfont icon-edit"></text>
								</view>
								<view class="cath-time">到期：2021-05-31 09:22:06</view>
							</view>
							<view class="cath-infos">
								<view class="item">操作：添加导管</view>
								<view class="item">操作人：路飞</view>
							</view>
						</view>
						<u-loadmore :status="loadStatus[1]" bgColor="#f9f9f9"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="page-box">
						<view class="ins-panel" v-for="(item, index) in orderList[2]" :key="index">
							<view class="ins-heading flex-center">
								<view class="ins-time">2021-06-10 15:41:37</view>
								<view class="iconfont icon-fenxiang"></view>
							</view>
							<view class="ins-card">
								<view class="ins-title">气囊漂浮导管</view>
								<u-row>
									<u-col span="5">
										<view class="item_row">
											<view class="item-label">内置：15cm</view><view class="item-val">15cm</view>
										</view>
									</u-col>
									<u-col span="5">
										<view class="item_row">
											<view class="item-label">内置：15cm</view><view class="item-val">15cm</view>
										</view>
									</u-col>
									<u-col span="12">
										<view class="item_row">
											<view class="item-label">巡检：</view><view class="item-val text-danger">异常</view>
										</view>
									</u-col>
									<u-col span="12">
										<view class="item_row">
											<view class="item-label">事件：</view><view class="item-val">穿刺口渗血更换敷料，敷料到期更换</view>
										</view>
									</u-col>
									<u-col span="12">
										<view class="item_row">
											<view class="item-label">图片：</view>
											<view class="item-val">
												<image src="../../static/images/demopic.png" mode="widthFix" style="width: 376rpx;"></image>
											</view>
										</view>
									</u-col>
									<u-col span="12">
										<view class="item_row">
											<view class="item-label">备注：</view><view class="item-val">穿刺口渗血更换敷料，敷料到期更换</view>
										</view>
									</u-col>
								</u-row>
							</view>
						</view>
						<u-loadmore :status="loadStatus[2]" bgColor="#f9f9f9"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="c-footer">
			<u-button  type="primary" @click="openUrl('/pages/catheter/catheter')" :custom-style="btnStyle">+ 导管</u-button>
		</view>
		<view class="ac-fixed" @click="openUrl('/pages/index/patientPrint')"><text class="iconfont icon-dayin-shi"></text></view>
		<!-- 患者详情-添加附属物 -->
		<u-picker @confirm="confirm" mode="selector" v-model="fshow" :range="selector" :default-selector="[0]"></u-picker>
		<!-- 修改 -->
		<u-popup v-model="xshow" mode="bottom" border-radius="20">
			<u-form :model="form" ref="uForm">
				<view class="popup-head">
					<view class="popup-title">导管修改</view>
					<view class="popup-close" @click="xshow = false">取消</view>
				</view>
				<view class="popup-body">
					<view class="p-form_row flex-center">
						<view class="p-label">置管日期</view>
						<view class="flex_bd">
							<u-input @click="tshow = true" v-model="form.times" :custom-style="inputStyle" :clearable="false"/>
						</view>
					</view>
					<view class="p-form_row flex-center">
						<view class="p-label">时间单位</view>
						<view class="flex_bd">
							<u-radio-group v-model="radio">
								<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled">
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
					
					<view class="p-form_row flex-center">
						<view class="p-label">有效期</view>
						<view class="flex_bd">
							<u-input v-model="form.yxq" :custom-style="inputStyle" :clearable="false"/>
						</view>
						<view class="end-label">天</view>
					</view>
					<view class="p-form_row flex-center">
						<view class="p-label">内置长度</view>
						<view class="flex_bd">
							<u-input v-model="form.nlang" :custom-style="inputStyle" :clearable="false"/>
						</view>
						<view class="end-label">cm</view>
					</view>
					<view class="p-form_row flex-center">
						<view class="p-label">外露长度</view>
						<view class="flex_bd">
							<u-input v-model="form.wlang" :custom-style="inputStyle" :clearable="false"/>
						</view>
						<view class="end-label">cm</view>
					</view>
					<view class="p-form_row flex-center">
						<view class="p-label">深度</view>
						<view class="flex_bd">
							<u-input v-model="form.deep" :custom-style="inputStyle" :clearable="false"/>
						</view>
						<view class="end-label">cm</view>
					</view>
					<view class="p-form_row flex-center">
						<view class="p-label">臀围</view>
						<view class="flex_bd">
							<u-input v-model="form.dwwidth" :custom-style="inputStyle" :clearable="false"/>
						</view>
						<view class="end-label">cm</view>
					</view>
					<view class="p-footer">
						<u-button  type="primary" :custom-style="btnStyle">确认修改</u-button>
					</view>
				</view>
			</u-form>
		</u-popup>
		<!-- 时间 -->
		<u-picker mode="time" v-model="tshow" :params="params"></u-picker>
		<!-- 打印 -->
		<u-modal v-model="dshow" title="标签打印" :title-style="titleStyle" :show-confirm-button="false" width="58.5%"
		 border-radius="30">
			<view class="slot-content">
				<view class="info-group">
					<view class="info-group-item">
						<view class="info-label">患者名字</view>
						<view class="info-val">姜轮</view>
					</view>
					<view class="info-group-item">
						<view class="info-label">住院床号</view>
						<view class="info-val">A1床</view>
					</view>
					<view class="info-group-item">
						<view class="info-label">住院号</view>
						<view class="info-val">47887942</view>
					</view>
					<view class="info-group-item">
						<view class="info-label">导管名称</view>
						<view class="info-val">PICC管</view>
					</view>
					<view class="info-group-item">
						<view class="info-label">导管位置</view>
						<view class="info-val">外10cm</view>
					</view>
				</view>
				<view class="info-time">
					2020年11月07日12:12彭于晏
				</view>
			</view>
			<view class="slot-footer">
				<button type="default" class="btn cancel-btn" @click="dshow = false">取消</button>
				<button type="default" class="btn confirm-btn" @click="confirm">确定</button>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabTitle: ['导管列表', '操作记录', '巡检记录'],
				cur: 0, //默认选中第一个tab
				dgList: [{
					title: '气切导管',
					isSubShow: false,
				},{
					title: '气切导管',
					isSubShow: false,
				},{
					title: '气切导管',
					isSubShow: false,
				}],
				btnStyle: {
					background:'#009fe8',
					color: '#ffffff',
					height:'98rpx',
					fontSize:'36rpx',
					borderRadius:"10rpx"
				},
				fshow:false,
				selector: ['敷料贴','敷料贴','敷料贴'],
				xshow:false,
				form: {
					times: '2020-10-20 14:20:30',
					yxq: '7',
					nlang: '12',
					wlang: '25',
					deep: '99',
					dwwidth: '39'
				},
				radioList: [
					{
						name: '天',
						disabled: false
					},
					{
						name: '小时',
						disabled: false
					}
				],
				radio: '',
				inputStyle:{
					height:'76rpx',
					border:'1px solid #e5e5e5',
					fontSize:'28rpx',
					padding:'0 20rpx',
					borderRadius:"10rpx"
				},
				// 新111111111111111
				tshow:false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				orderList: [[], [], []],
				dataList: [
					{
						id:'1',
						title: '气切导管',
						isSubShow: false,
					},
					{
						id:'2',
						title: '气切导管',
						isSubShow: false,
					},
					{
						id:'3',
						title: '气切导管',
						isSubShow: false,
					},
				],
				list: [
					{
						name: '导管列表'
					},
					{
						name: '操作记录'
					},
					{
						name: '巡检记录'
					},
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore','loadmore','loadmore'],
				// xin
				dshow:false,
				titleStyle: {
					color: '#373b4f',
					fontSize: '30rpx',
					backgroundColor: '#ebf0f2',
					padding: '24rpx',
				},
			}
		},
		onLoad() {
			this.getOrderList(0);
			this.getOrderList(1);
			this.getOrderList(2);
		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
			// 手机分析师
			Toggle(item, ind) {
				this.dgList.forEach(i => {
					if (i.isSubShow !== this.dgList[ind].isSubShow) {
						i.isSubShow = false;
					}
				});
				item.isSubShow = !item.isSubShow;
			},
			// 数据
			reachBottom() {
				// 此tab为空数据
				this.loadStatus.splice(this.current,1,"loading")
				setTimeout(() => {
					this.getOrderList(this.current);
				}, 1200);
			},
			// 页面数据
			getOrderList(idx) {
				for(let i = 0; i < 5; i++) {
					let index = this.$u.random(0, this.dataList.length - 1);
					let data = JSON.parse(JSON.stringify(this.dataList[index]));
					data.id = this.$u.guid();
					this.orderList[idx].push(data);
				}
				this.loadStatus.splice(this.current,1,"loadmore")
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				this.getOrderList(index);
			},
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({ detail: { current } }) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	}
</script>

<style lang="scss">
	.popup-body{
		padding: 20rpx 30rpx;
		.p-footer{
			padding: 30rpx 0;
		}
		.p-form_row{
			position: relative;
			padding: 10rpx 0;
			.p-label{
				color: #999999;
				font-size: 30rpx;
				width: 164rpx;
			}
			.end-label{
				position: absolute;
				right: 20rpx;
				top: 10rpx;color: #999999;
				font-size: 28rpx;
				line-height: 76rpx;
			}
		}
	}
	.popup-head{
		position: relative;
		height: 80rpx;
		text-align: center;
		border-bottom: 1px solid #EEEEEE;
		.popup-title{
			font-size: 32rpx;
			line-height: 80rpx;
		}
		.popup-close{
			line-height: 80rpx;
			color: #999999;
			font-size: 28rpx;
			position: absolute;
			right: 20rpx;
			top: 0;
		}
	}
	.ins-card{
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		.ins-title{
			margin-bottom: 10rpx;
			font-weight: bold;
			color: #373b4f;
			font-size: 30rpx;
		}
		.item_row{
			display: flex;
			line-height: 40rpx;
			margin-top: 20rpx;
			color: #96979f;
			font-size: 26rpx;
		}
	}
	.ins-panel{
		margin-bottom: 30rpx;
		.ins-heading{
			margin-bottom: 20rpx;
			.ins-time{
				color: #96979f;
				font-size: 26rpx;
			}
			.iconfont{
				color: #9fa0a7;
				margin-left: auto;
			}
		}
	}
	.cah-record-list{
		display: flex;
		align-items: center;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		padding: 24rpx;
	}
	.cath-infos{
		text-align: right;
		.item{
			font-size: 24rpx;
			margin-bottom: 20rpx;
			color: #a09fa8;
		}
		.item:last-child{
			margin-bottom: 0;
		}
	}
	.fs-heading{
		text-align: center;
		position: relative;
		text{
			position: relative;
			z-index: 90;
			display: inline-block;
			padding: 0 10px;
			background-color: #FFFFFF;
		}
		&::after{
			content: '';
			width: 100%;
			border-top: 1px dashed #EEEEEE;
			top: 50%;
			left: 0;
			position: absolute;
		}
	}
	.ac-fixed{
		position: fixed;
		right: 30rpx;
		bottom: 140rpx;
		width: 106rpx;
		height: 106rpx;
		background-color: #FFFFFF;
		border-radius: 105rpx;
		text-align: center;
		line-height: 106rpx;
		box-shadow: 0 0 10px rgba(0,0,0,.1);
		.iconfont{
			color: #00a4e8;
			font-size: 68rpx;
		}
	}
	.cath-list-body{
		padding: 20rpx 20rpx 10rpx 20rpx;
		.cath-item{
			font-size: 24rpx;
			margin-bottom: 20rpx;
			color: #a09fa8;
		}
	}
	.cath-list-cell{
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		background-color: #e8f1f7;
		overflow: hidden;
		box-shadow: 0 3px 6px rgba(0,0,0,.04);
		.btn {
			padding: 0 25rpx;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 24rpx;
			margin: 0;
			border-radius: 10rpx;
			background-color: transparent;
		}
	}
	.cath-toggle-body{
		padding: 20rpx;
		background-color: #FFFFFF;
		.fs-cell{
			padding: 30rpx 0;
			border-bottom: 1px dashed #bed7e7;
			
		}
	}
	.cath-time{
		color: #a09fa8;
		font-size: 24rpx;
	}
	.c-footer{
		box-sizing: border-box;
		z-index: 999;
		padding: 20rpx 30rpx;
	}
	.ct-btns{
		line-height: 1;
		height: 60rpx;
		.btn{
			margin-left: 16rpx;
		}
	}
	.cath-head{
		margin-bottom: 20rpx;
		.title{
			font-size: 30rpx;
			font-weight: bold;
			margin-right: 10rpx;
		}
		.icon-edit{
			border: 1px solid #9d9ea6;
			display: inline-block;
			color: #9d9ea6;
			font-size: 20rpx;
			border-radius: 30px;
			width: 36rpx;
			height: 36rpx;
			line-height: 34rpx;
			text-align: center;
			margin-left: 10rpx;
			&::before{
				display: inline-block;
				transform: scale(.84);
			}
		}
		.ct-btns{
			margin-left: auto;
		}
	}
	.cath-foot{
		padding: 20rpx 30rpx;
		border-top: 1px solid #cdd9e2;
		.btn-gray-solid:last-child{
			margin-left: auto;
		}
	}
	.loading-more{
		text-align: center;
		color: #a09fa8;
		font-size: 24rpx;
		margin-top: 30rpx;
	}
	.tabMain{
		padding-bottom: 140rpx;
	}
	
	.tab-content{
		padding: 30rpx;
	}
	.tab-head {
		padding: 0 30rpx;
		background-color: #FFFFFF;

		.tab-item {
			position: relative;
			color: #72717c;
			font-size: 30rpx;
			height: 64rpx;
			margin-right: 50rpx;
		}

		.tab-item.active {
			color: #373b4f;
			font-size: 34rpx;
			font-weight: bold;
		}

		.tab-item.active:after {
			width: 56rpx;
			height: 5rpx;
			background-color: #00a9e8;
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -28rpx;
		}
	}

	.pt-btns {
		justify-content: flex-end;

		.btn {
			width: 108rpx;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 24rpx;
			margin: 0;
			margin-left: 20rpx;
			border-radius: 10rpx;
			background-color: transparent;
			color: #FFFFFF;
		}

		.btn-ac {
			border: 1px solid #FFFFFF;
			color: #FFFFFF;
		}

		.btn-gout {
			background-color: #00a4e8;
		}

		button:after {
			display: none;
		}
	}

	.pt-head {
		padding-top: 20rpx;
		margin-bottom: 20rpx;

		.z-id {
			font-size: 32rpx;
			margin-right: 10rpx;
		}

		.z-num {
			font-size: 24rpx;
		}
	}

	.bed-cc {
		width: 120rpx;
		height: 120rpx;
		border-radius: 120rpx;
		background-color: #FFFFFF;
		text-align: center;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-right: 30rpx;

		.txt {
			color: #373b4f;
		}

		.iconfont {
			font-size: 50rpx;
			line-height: 1;
			color: #00a4e8;
		}
	}

	.pt-meta {
		font-size: 24rpx;
		margin-bottom: 36rpx;
	}

	.pt-card {
		position: relative;
		line-height: 1.2;
		background: url(../../static/images/paient/bg.jpg) no-repeat;
		background-size: cover;
		height: 240rpx;
		box-sizing: border-box;
		padding: 30rpx;
		color: #FFFFFF;
		box-shadow: 1px 4px 10px #9bbede;
		border-radius: 30rpx;
		overflow: hidden;

		.icon-erweima {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			font-size: 44rpx;
		}
	}

	.pt-grid {
		background-color: #FFFFFF;
		padding: 20rpx 30rpx 0 30rpx;
	}
	
	.pat-wrapper{
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}
	.swiper-box {
		flex: 1;
	}
	.swiper-item {
		height: 100%;
	}
	.page-box{
		padding: 20rpx 30rpx;
	}
	
	// 新
	.slot-content {
		padding: 20rpx 52rpx;
	}
	
	.slot-footer {
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
		.btn {
			margin: 0 20rpx;
			width: 160rpx;
			color: #fff;
			font-size: 30rpx;
			background-color: #c4d0d6;
			border-radius: 10rpx;
			height: 60rpx;
			line-height: 60rpx;
		}
	
		.btn::after {
			display: none;
		}
	
		.confirm-btn {
			background-color: #009fe8;
		}
	}
	.info-group {
		padding: 20rpx 0;
	
		.info-group-item {
			font-size: 26rpx;
			line-height: 60rpx;
			color: #373b4f;
			display: flex;
			align-items: center;
	
			.info-label {
				width: 186rpx;
				opacity: 0.6;
			}
		}
	}
	.info-time {
		font-size: 24rpx;
		color: #009fe8;
		line-height: 1;
	}
	
</style>
